<template>
	<!-- // 余额-->
	<view class="outer">
		<!-- #ifndef H5 -->
		<Nav :isShow="false"></Nav>
		<!-- #endif -->
		<view class="user_bj">
			<!-- 资产 -->
			<view class="property">
				<view class="asset">
					<view>总资产(元)</view>
					<text>{{ nowMoney }}</text>
				</view>
				<navigator url="user_recharge">
					<view class="recharge">充值</view>
				</navigator>
			</view>
			<!-- 消费记录 -->
			<view class="calendar">
				<view class="addmony">
					<view>累计充值（元）</view>
					<text>{{ recharge }}</text>
				</view>
				<view class="consume">
					<view>累计消费（元）</view>
					<text>{{ orderStatusSum }}</text>
				</view>
			</view>
		</view>
		<view class="main_card">
			<navigator url="consume">
				<view class="">
					<image src="./../static/img/zhangdan.png" mode=""></image>
					<view class="">账单记录</view>
				</view>
			</navigator>

			<view class="" @click="changeindex">
				<image src="./../static/img/xiaofei.png" mode=""></image>
				<view class="">消费记录</view>
			</view>
			<view class="" @click="indexs">
				<image src="./../static/img/chongzhijilu.png" mode=""></image>
				<view class="">充值记录</view>
			</view>
			<navigator url="integral">
				<view class="">
					<image src="./../static/img/jifen.png" mode=""></image>
					<view class="">积分中心</view>
				</view>
			</navigator>
		</view>
		<view class="exchange">
			<view class="change_text yeellow">
				<view class="change_t">
					签到领积分
					<view class="change_x">赚积分抵现金</view>
				</view>
				<view class="change_i">
					<image src="../static/img/gift.png" mode=""></image>
				</view>
			</view>
			<view class="change_text pink">
				<view class="change_t">
					领取优惠卷
					<view class="change_x">满减享优惠</view>
				</view>
				<view class="change_i">
					<image src="../static/img/money.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="tuijian">
			<view class="hr">
				<view class="left">————</view>
				<view class="middle">
					<text class="middle_text">热门推荐</text>
				</view>
				<view class="right">————</view>
			</view>
			<view class="hot_goods">
				<view
					v-for="(item, index) in hotGoodsList"
					:key="index"
					class="hot_goods_content"
					@click="toDetails(item.id)"
					style="cursor: pointer;"
				>
					<image :src="item.image" mode=""></image>
					<text class="storeName">{{ item.storeName }}</text>
					<text class="price">￥{{ item.price }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Nav from "@/components/top_nav.vue";
import {hotRecommend} from "@/network/index.js";
import {getlance} from "../../../network/user.js";
export default {
	data() {
		return {
			nowMoney: "",
			orderStatusSum: "",
			recharge: "",
			hotGoodsList: []
		};
	},
	components: {
		Nav
	},
	methods: {
		toDetails(id) {
			uni.navigateTo({
				url: "../../../subpackages/classify/ProductDetails?id=" + id
			});
		},
		async getHotRecommend() {
			try {
				const res = await hotRecommend();
				this.hotGoodsList = res.data.list;
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		indexs() {
			uni.navigateTo({
				url: "consume?index=2"
			});
		},
		async blance() {
			let {data} = await getlance();
			console.log(data);
			this.nowMoney = data.nowMoney;
			this.orderStatusSum = data.orderStatusSum;
			this.recharge = data.recharge;
		},
		changeindex() {
			uni.navigateTo({
				url: "consume?index=1"
			});
		}
	},
	created() {
		this.blance();
		this.getHotRecommend();
	}
};
</script>

<style lang="scss">
.tuijian {
	display: flex;
	flex-direction: column;
	align-items: center;
	.hr {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 10vh;
		background-color: #fff;
		width: 90vw;
		padding: 20px 0;
		.left,
		.right {
			margin: 0 20px;
			padding: 0 10px;
		}
		.left::after {
			content: "";
			display: inline-block;
			width: 5px;
			height: 5px;
			background-color: #000;
			transform: rotate(45deg) translateY(-5px) translateX(2px);
		}
		.right::before {
			content: "";
			display: inline-block;
			width: 5px;
			height: 5px;
			background-color: #000;
			transform: rotate(45deg) translateY(2px) translateX(-5px);
		}
	}
	.hot_goods {
		width: 90vw;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		background-color: #fff;
		.hot_goods_content {
			display: flex;
			flex-direction: column;
			width: 40vw;
			padding: 10px;
			image {
				width: 40vw;
				height: 40vw;
				border-radius: 10px;
			}
			.storeName {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.price {
				color: #e93323;
			}
		}
	}
}

.user_bj {
	width: 90%;
	margin: auto;
	height: 360rpx;
	margin-top: 50rpx;
	border-radius: 25rpx;
	background-image: url("../static/img/user_bg.png");
	.property {
		display: flex;
		justify-content: space-between;
		.asset {
			> view {
				font-size: 28rpx;
				color: #f99d86;
				margin-top: 30rpx;
				margin-left: 20rpx;
			}
			> text {
				margin-top: 10rpx;
				font-size: 60rpx;
				color: #fff;
				margin-left: 20rpx;
			}
		}
		.recharge {
			width: 150rpx;
			height: 50rpx;
			// border: 1px solid black;
			border-radius: 35rpx;
			background-color: white;
			text-align: center;
			line-height: 50rpx;
			color: red;
			margin-top: 30rpx;
			margin-right: 30rpx;
		}
	}
	.addmony {
		margin-left: 30rpx;
		margin-bottom: 10rpx;
		> text {
			color: #fff;
			font-size: 50rpx;
			font-family: "OPPOSans";
		}
	}
	.calendar {
		> text {
			color: #fff;
		}
		display: flex;
		margin-top: 100rpx;
		justify-content: space-between;
		.consume {
			margin-bottom: 10rpx;
			margin-right: 90rpx;
			> text {
				color: white;
				font-size: 50rpx;
				font-family: "OPPOSans";
			}
		}
		> view {
			color: #f89890;
		}
	}
}
.main_card {
	margin-top: 20rpx;
	display: flex;
	// flex-wrap: nowrap
	justify-content: space-around;
	text-align: center;
	image {
		width: 60rpx;
		height: 60rpx;
	}
	color: #cdcccc;
	font-size: 25rpx;
	border-bottom: 1px solid #e4e4e4;
	padding-bottom: 20rpx;
}
.exchange {
	display: flex;
	justify-content: space-between;
	margin-top: 30rpx;
	image {
		width: 100rpx;
		height: 100rpx;
	}
	.yeellow {
		background-color: #fff6d1;
		margin-left: 20rpx;
	}
	.pink {
		background-color: #fff3f3;
		margin-right: 20rpx;
	}
	.change_text {
		padding: 10rpx;
		// border: 1px solid black;
		width: 320rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		color: red;
	}
	.change_t {
		margin-left: 10rpx;
		margin-top: 15rpx;
		font-weight: bolder;
		.change_x {
			font-size: 25rpx;
			font-weight: lighter;
			margin-top: 5rpx;
		}
	}
}
</style>
